<template>
  <f-menu :collapse="collapse" :data="data" router :defaultActive="$route.path"> </f-menu>
</template>

<script lang="ts" setup>
  const props = defineProps<{
    collapse: boolean
  }>()
  let data = [
    {
      icon: 'HomeFilled',
      name: '首页',
      index: '/'
    },
    {
      icon: 'Check',
      name: '图标选择器',
      index: '/chooseIcon'
    },
    {
      icon: 'Location',
      name: '省市区选择',
      index: '/chooseArea'
    },
    {
      icon: 'Sort',
      name: '趋势标记',
      index: '/trend'
    },
    {
      icon: 'Timer',
      name: '时间选择',
      index: '/chooseTime'
    },
    {
      icon: 'Menu',
      name: '通知菜单',
      index: '/notification'
    },
    {
      icon: 'Bell',
      name: '导航菜单',
      index: '/menu'
    },
    {
      icon: 'TurnOff',
      name: '城市选择',
      index: '/chooseCity'
    },
    {
      icon: 'DArrowRight',
      name: '进度条',
      index: '/progress'
    },
    {
      icon: 'ScaleToOriginal',
      name: '日历',
      index: '/calendar'
    },
    {
      icon: 'Setting',
      name: '表单',
      index: '/form'
    },
    {
      icon: 'ShoppingBag',
      name: '表格',
      index: '/table'
    }
  ]
  console.log(props.collapse)
</script>
<style lang="scss" scoped>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
</style>
